<template>
    <view class="container">
        <!-- User Info Section -->
        <view class="user-info">
            <view class="f">
                <view class="user-avatar">
                    <image :src="user_avatar" class="avatar-image"></image>
                    <image
                        class="avatar-sex"
                        :src="
                            user_sex == 2
                                ? '/static/icon/sex-woman.png'
                                : '/static/icon/sex-man.png'
                        "
                    ></image>
                </view>
                <view class="f-col f-bt">
                    <view class="fs-32 fw-b">{{ user_name }}</view>
                    <view class="fs-26 detail-color">用户ID：{{ user_id }}</view>
                    <!-- <view class="fs-26 detail-color">运动损伤康复用户</view> -->
                    <!--  <view class="flex items-center">
                        <view class="w-24 h-2 bg-gray-200 rounded-full mr-2">
                            <view class="h-full bg-blue-500 rounded-full" style="width: 65%"></view>
                        </view>
                        <text class="fs-26">65%</text>
                    </view> -->
                </view>
            </view>
        </view>
        <!-- Core Functions -->
        <!-- 		<view class="mt-30 core-info">
			<h3 class="fs-36">核心功能</h3>
			<view class="f f-bt mt-30">
				<view class="f-col core-item">
					<view class="f f-c">
						<view class="core-icon">
							<view class="f-col f-c">
								<uni-icons type="staff-filled" color="#3b82f6" size="34"></uni-icons>
							</view>
						</view>
					</view>
					<view class="mt-20">
						<p class="fs-28 core-text">我的康复师</p>
					</view>
				</view>
				<view class="f-col core-item">
					<view class="f f-c">
						<view class="core-icon">
							<view class="f-col f-c">
								<uni-icons type="notification-filled" color="#3b82f6" size="32"></uni-icons>
							</view>
						</view>
					</view>
					<view class="mt-20">
						<p class="fs-28 core-text">训练提醒</p>
					</view>
				</view>
				<view class="f-col core-item">
					<view class="f f-c">
						<view class="core-icon">
							<view class="f-col f-c">
								<uni-icons type="heart-filled" color="#3b82f6" size="32"></uni-icons>
							</view>
						</view>
					</view>
					<view class="mt-20">
						<p class="fs-28 core-text">健康数据</p>
					</view>
				</view>
			</view>
		</view> -->

        <!-- Quick Access -->
        <view class="mt-30 quick-info">
            <view class="fs-36 fw-b">快捷入口</view>
            <view class="f f-bt f-wrap" style="justify-content: flex-start">
                <view
                    class="f-col mt-30 quick-item"
                    v-for="(item, index) in quickList"
                    :key="index"
                    @click="quickJump(item.path)"
                >
                    <view class="f f-c">
                        <view class="quick-icon">
                            <view class="f-col f-c">
                                <uni-icons :type="item.icon" color="#3b82f6" size="16"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="mt-20">
                        <text class="fs-24 quick-text">{{ item.title }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'pinia';
import useUserStore from '@/stores/modules/user';
import _ from 'lodash';
import login from '@/common/login';

export default {
    computed: {
        // 使用 mapState 辅助函数将 store 中的状态映射为计算属性
        ...mapState(useUserStore, ['user_name', 'user_avatar', 'user_sex', 'user_id'])
    },
    data() {
        return {
            quickList: [
                {
                    icon: 'person-filled',
                    title: '个人资料',
                    path: '/pages/user/info'
                },
                // {
                //     icon: 'gear-filled',
                //     title: '基础设置',
                //     path: ''
                // },
                {
                    icon: 'calendar-filled',
                    title: '我的训练',
                    path: '/pages/daily-plan/daily-plan'
                },
                // {
                //     icon: 'map-filled',
                //     title: '康复报告',
                //     path: ''
                // },
                // {
                //     icon: 'calendar-filled',
                //     title: '预约记录',
                //     path: ''
                // },
                // {
                //     icon: 'chat-filled',
                //     title: '咨询记录',
                //     path: ''
                // },
                {
                    icon: 'folder-add-filled',
                    title: '健康资讯',
                    path: '/pages/news/news'
                },
                {
                    icon: 'help-filled',
                    title: '帮助中心',
                    path: '/pages/help/help'
                }
            ]
        };
    },
    onShow() {
        const user_store = useUserStore();
        if (!_.isEmpty(user_store.token)) return;
        // #ifndef MP-WEIXIN
        uni.reLaunch({
            url: '/pages/login/login'
        });
		console.log('跳转');
        // #endif
        // #ifdef MP-WEIXIN
        // 微信小程序调用微信登录
        login();
        // #endif
    },
    methods: {
        quickJump(path) {
            if (path == '') return;
            uni.navigateTo({
                url: path
            });
        }
    }
};
</script>

<style lang="scss">
page {
    background: rgb(239, 246, 255, 0.5);
}

.container {
    padding: 20rpx 30rpx;
}

.user-info {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;

    .user-avatar {
        margin-right: 30rpx;
        position: relative;

        .avatar-image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            border: 4rpx solid #93c5fd;
        }

        .avatar-sex {
            position: absolute;
            width: 50rpx;
            height: 50rpx;
            right: -10rpx;
            bottom: 0rpx;
        }
    }

    .detail-color {
        color: #6b7280;
    }
}

.core-info {
    .core-item {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        width: 30%;

        .core-icon {
            width: 100rpx;
            height: 100rpx;
            background-color: #dbeafe;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }

        .core-text {
            text-align: center;
            font-weight: 500;
        }
    }
}

.quick-info {
    .quick-item {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        width: 22%;
        margin: 10rpx;

        .quick-icon {
            width: 50rpx;
            height: 50rpx;
            background-color: #dbeafe;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }

        .quick-text {
            text-align: center;
            font-weight: 500;
        }
    }
}
</style>
